<template>
  <view class="add-address">
    <div class="uForm">
      <u-form :border-bottom="false" :model="form" ref="uForm" :rule="rules">
        <u-form-item class="border" label="收货人" label-width="130" prop="salesConsigneeName">
          <u-input v-model="form.salesConsigneeName" clearable placeholder="请输入收货人姓名" />
        </u-form-item>
        <u-form-item label="手机号码" label-width="130" prop="salesConsigneeMobile">
          <u-input v-model="form.salesConsigneeMobile" type="number" maxlength="11" placeholder="请输入收货人手机号码" />
        </u-form-item>
        <u-form-item label="所在区域" label-width="130" prop="salesConsigneeAddressPath">
          <u-input v-model="form.salesConsigneeAddressPath" type="select" @click="showPicker" placeholder="请选择所在地区" />
        </u-form-item>
        <u-form-item class="detailAddress" label="详细地址" label-width="130" prop="salesConsigneeDetail">
          <u-input type="textarea" v-model="form.salesConsigneeDetail" maxlength="100" placeholder="街道楼牌号等" />
        </u-form-item>
        <div class="submit" @click="save">保存</div>
      </u-form>
      <m-city :provinceData="list" headTitle="区域选择" ref="cityPicker" @funcValue="getpickerParentValue" pickerSize="4"></m-city>

    </div>
  </view>
</template>
<script>
import { getRefundGoodsAddress, saveRefundGoodsAddress } from "@/api/shops";
import gkcity from "@/components/m-city/m-city.vue";
export default {
  components: {
    "m-city": gkcity,
  },
  data() {
    return {
      routerVal: "",
      form: {
        salesConsigneeName: "", // 收货人姓名
        salesConsigneeMobile: "", // 收货人电话
        salesConsigneeAddressId: [], // 售后地址id,逗号分割
        salesConsigneeAddressPath: "", // 售后地址，逗号分割
        salesConsigneeDetail: "", // 详细地址
      },
      // 表单提交校验规则
      rules: {
        salesConsigneeName: [
          {
            required: true,
            message: "收货人姓名不能为空",
            trigger: ["blur", "change"],
          },
        ],
        salesConsigneeMobile: [
          {
            required: true,
            message: "手机号码不能为空",
            trigger: ["blur", "change"],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: "手机号码不正确",
            trigger: ["change", "blur"],
          },
        ],
        salesConsigneeAddressPath: [
          {
            required: true,
            message: "请选择所在区域",
            trigger: ["change"],
          },
        ],
        salesConsigneeDetail: [
          {
            required: true,
            message: "请填写详细地址",
            trigger: ["blur", "change"],
          },
        ],
      },
      list: [
        {
          id: "",
          localName: "请选择",
          children: [],
        },
      ],
    };
  },
  onLoad(option) {
    this.routerVal = option;
  },
  onShow() {
    this.init();
  },
  // 初始化rules必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    async init() {
      let res = await getRefundGoodsAddress();
      if (res.data.success) {
        // 将查出来的数据回显
        Object.keys(this.form).map((item) => {
          this.form[item] = res.data.result[item];
        });
      }
    },
    // 三级地址联动回调
    getpickerParentValue(e) {
      // 将需要绑定的地址设置为空，并赋值
      this.form.salesConsigneeAddressId = [];
      let name = "";

      e.forEach((item, index) => {
        if (item.id) {
          // 遍历数据
          this.form.salesConsigneeAddressId.push(item.id);
          name += item.localName;
          this.form.salesConsigneeAddressPath = name;
        }
      });
    },

    // 保存退货地址
    save() {
      this.$refs.uForm.validate(async (valid) => {
        if (valid) {
          let res = await saveRefundGoodsAddress(this.form);
          if (res.data.success) {
            uni.showToast({
              title: "保存成功",
              duration: 2000,
              icon: "none",
            });
          }
        }
      });
    },

    // 显示三级地址联动
    showPicker() {
      this.$refs.cityPicker.show();
    },
  },
};
</script>
<style scoped lang="scss">
.detailAddress {
  /deep/ .u-form-item--left {
    display: flex;
    align-items: flex-start;
  }
}

.uForm {
  width: 94%;
  overflow: hidden;
  left: 3%;
  position: relative;
  top: 2%;
  background: #fff;
  border-radius: 20rpx;
  padding: 0 0 40rpx 0;
}
.add-address {
  width: 100%;
  padding-top: 3%;

  /deep/ .u-form-item {
    background-color: #fff;
    padding: 24rpx 30rpx;
  }
  .u-btn {
    margin: 30rpx 30rpx 0 30rpx;
    background-color: $main-color;
  }

  /deep/.u-checkbox {
    margin: 30rpx 30rpx 0 30rpx;

    .u-label-class.u-checkbox__label {
      color: $font-color-light;
      font-size: $font-sm;
    }
  }
}
/deep/ .u-checkbox__label {
  font-size: 28rpx;
}
</style>
